<template>
  <div>
    <photo-view :list="list" @close="close"/>
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-form v-model="form">
        <el-row style="margin-bottom: 5px">
          <el-col :span="22">
            <p class="pinformation">标准曲线描述</p>
          </el-col>
        </el-row>
        <div style="font-size: 14px; margin-left: 10px; margin-bottom: 10px">{{form.curveDesc || '/'}}</div>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
            <p class="pinformation">标准曲线截图</p>
            <p class="totalStyle">共 {{form.curveFileList.length}} 条数据</p>
          <el-table :data="form.curveFileList" class="business" border ref="qxTableRef">
            <el-table-column label="截图编号" align="center" prop="fileCode" width="220"/>
            <el-table-column label="截图名称" align="center" >
              <template #default="scope">
              <span @click="list = scope.row.fileList" class="fileNameHover">{{scope.row.fileMc}}</span>
            </template>
          </el-table-column>
          </el-table>
        </el-row>
  
        <!-- 分析步骤描述 -->
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="22">
            <p class="pinformation">分析步骤描述</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <div style="font-size: 14px; margin-left: 10px; margin-bottom: 10px">{{form.stepDes || '/'}}</div>
        </el-row>
  
        <el-row style="margin-bottom: 5px">
            <p class="pinformation">分析步骤截图</p>
            <p class="totalStyle">共 {{form.stepFileList.length}} 条数据</p>
          <el-table class="business" :data="form.stepFileList" border  ref="stepTableRef">
            <el-table-column label="截图编号" align="center" prop="fileCode" width="220"/>
            <el-table-column label="截图名称" align="center" >
              <template #default="scope">
              <span @click="list = scope.row.fileList" class="fileNameHover">{{scope.row.fileMc}}</span>
            </template>
          </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>
  
  <script setup>
import useMethodStore from "@/store/modules/method";

const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const methodStepForm = computed(() => methodStore.methodStepForm);

const { proxy } = getCurrentInstance();

const data = reactive({
  form: { curveFileList: [], stepFileList: [] },
});

const { form } = toRefs(data);

const list = ref([])
function close() {
  list.value = []
}

watch(methodStepForm, () => {
  form.value = methodStepForm.value;
});

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})

onUpdated(() => {
  getHeight()
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>